<template>
  <div class="order-container">
    <el-card class="order-card">
      <div slot="header" class="clearfix">
        <span style="font-size: 18px; font-weight: bold;">我的订单</span>
      </div>

      <el-table :data="orderList" style="width: 100%">
        <el-table-column prop="id" label="订单编号" width="180">
          <template slot-scope="scope">
            <el-button type="text">
              {{ scope.row.id }}
            </el-button>
          </template>
        </el-table-column>

        <el-table-column label="商品信息" width="400">
          <template slot-scope="scope">
            <div v-for="item in scope.row.orderItemList" :key="item.id" class="order-item">
              <el-image :src="getImageUrl(item.product.imageId)" fit="contain"
                style="width: 60px; height: 60px; margin-right: 10px;"></el-image>
              <div class="item-info">
                <div class="item-name">{{ item.product.name }}</div>
                <!-- <div class="item-spec">规格: {{ item.specification }}</div> -->
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="单价/数量" width="180">
          <template slot-scope="scope">
            <div v-for="item in scope.row.orderItemList" :key="item.id" class="item-price-quantity">
              <span>¥{{ item.product.price.toFixed(2) }}</span>
              <span class="quantity">x{{ item.quantity }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="totalAmount" label="订单总价" width="120">
          <template slot-scope="scope">
            <span class="total-price">¥{{ scope.row.totalPrice.toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地址" width="120">
          <template slot-scope="scope">
            <span class="">{{ scope.row.address }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="status" label="状态" width="120">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 0 ? 'warning' : 'success'">
              {{ scope.row.status === 0 ? '已下单' : '已发货' }}
            </el-tag>
          </template>
        </el-table-column>

      </el-table>

    </el-card>

  </div>
</template>

<script>
import storage from '@/utils/storage'
export default {
  name: 'OrderList',
  data() {
    return {
      userId: '',
      orderList: [],
    }
  },
  created() {
    this.userId = storage.getLoginUser().id
    this.getList()
  },
  methods: {
    getImageUrl(imageId) {
      return `http://localhost:8000/api/files/download/${imageId}`
    },
    getList() {
      this.$api.order.listByUserId(this.userId).then(res => {
        if (res.code === 200) {
          this.orderList = res.data
        }
      })

      // 模拟数据
      // setTimeout(() => {
      //   this.orderList = [
      //     {
      //       orderNo: '202305010001',
      //       items: [
      //         {
      //           id: 1,
      //           productName: '商品1',
      //           productImage: 'https://via.placeholder.com/60?text=Product1',
      //           specification: '标准版/黑色',
      //           price: 99.99,
      //           quantity: 2
      //         },
      //         {
      //           id: 2,
      //           productName: '商品2',
      //           productImage: 'https://via.placeholder.com/60?text=Product2',
      //           specification: '豪华版/白色',
      //           price: 199.99,
      //           quantity: 1
      //         }
      //       ],
      //       totalAmount: 399.97,
      //       status: 1,
      //       createTime: '2023-05-01 10:30:25'
      //     },
      //     {
      //       orderNo: '202305010002',
      //       items: [
      //         {
      //           id: 3,
      //           productName: '商品3',
      //           productImage: 'https://via.placeholder.com/60?text=Product3',
      //           specification: '尊享版/金色',
      //           price: 299.99,
      //           quantity: 1
      //         }
      //       ],
      //       totalAmount: 299.99,
      //       status: 3,
      //       createTime: '2023-05-01 14:15:30'
      //     }
      //   ]
      // }, 500)
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    getStatusType(status) {
      const statusMap = {
        1: 'warning',  // 待支付
        2: 'info',     // 待发货
        3: '',         // 待收货
        4: 'success',  // 已完成
        0: 'danger'    // 已取消
      }
      return statusMap[status]
    },
    getStatusText(status) {
      const statusMap = {
        1: '待支付',
        2: '待发货',
        3: '待收货',
        4: '已完成',
        0: '已取消'
      }
      return statusMap[status]
    },
    viewOrderDetail(orderNo) {
      this.currentOrderNo = orderNo
      this.detailVisible = true
    },
    handlePay(order) {
      this.$confirm('确定要支付该订单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用支付API
        this.$message.success('支付成功')
        this.getList()
      })
    },
    handleCancel(order) {
      this.$confirm('确定要取消该订单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用取消订单API
        this.$message.success('订单已取消')
        this.getList()
      })
    },
    handleConfirm(order) {
      this.$confirm('确定已收到商品吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用确认收货API
        this.$message.success('确认收货成功')
        this.getList()
      })
    }
  }
}
</script>

<style scoped>
.order-container {
  padding: 20px;
}

.order-card {
  margin-bottom: 20px;
}

.filter-container {
  display: flex;
  align-items: center;
  margin-top: 15px;
}

.filter-item {
  margin-right: 10px;
}

.order-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.order-item:last-child {
  border-bottom: none;
}

.item-info {
  flex: 1;
}

.item-name {
  font-size: 14px;
  margin-bottom: 5px;
}

.item-spec {
  font-size: 12px;
  color: #999;
}

.item-price-quantity {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
}

.quantity {
  color: #666;
}

.total-price {
  color: #f56c6c;
  font-weight: bold;
}

.pagination-container {
  margin-top: 20px;
  text-align: center;
}
</style>